import sc from '../../img/sc.png'
import go from '../../img/go.png'
import { useNavigate, Link } from 'react-router-dom'

import { SearchBar } from 'antd-mobile';
import useDebounce from '../hooks/useDebounce';
import './index.scss'
import axios from 'axios'

import { useEffect, useState } from 'react'
const Search = () => {
    const [searchlist, setSearchlist] = useState([])
    const navigate = useNavigate()
    const [visible2, setVisible2] = useState(false)
    const [searchText, setSearchText] = useState('')
    const [searchArr, setAearchArr] = useState([])


    const gotomain = () => {
        navigate('/')
    }
    const getSearchData = (value) => {
        if (value !== '') {
            axios.get(`/mcp/queryAssociationWordInfo?portal=21&country=CNQX&lang=zh-CN&version=350&_areacode=CNQX&beCode=CNQX&keyword=${value}&limit=10&isHighlight=0`).then(res => {
                console.log(res);
                setAearchArr(res.data.wordList)
            })
        }
        else {
            setAearchArr([])
        }
    }
    const delayGetSearchData = useDebounce(value => getSearchData(value), 400)
    const changeText = (value) => {
        setSearchText(value)
        setVisible2(true)
        delayGetSearchData(value)

    }
    useEffect(() => {
        axios.get('/mcp/queryHotWord?portal=21&country=CNQX&lang=zh-CN&version=350&_areacode=CNQX&beCode=CNQX').then(res => {
            console.log(res);
            setSearchlist(res.data.hotWordList)
        })
    }, [])


    return <><div className="search">
        <div className="title">
            <img src={go} alt="" onClick={gotomain} />
            荣耀亲选
        </div>
        <div className='ss'>
            <i className='iconfont icon-sousuoxiao'></i>
            <SearchBar placeholder='儿童手表' onChange={changeText} value={searchText} />
            <span onClick={() => {
                setVisible2(true)
            }}>搜索</span>
        </div>
        <div className='history'>
            <div className='history-title'>
                <span>历史记录</span>
                <img src={sc} alt="" />
            </div>
            <div className='history-con'>
                <span className='item'>多少度</span>
                <span className='item'>手机</span>
            </div>
        </div>
        <div className='hot'>
            <div className='hot-title'>
                <span>热门搜索</span>
            </div>
            <div className='hot-con'>


                {searchlist.word}
                {searchlist.map(item => <span className='hot-item' key={item.id}>
                    {item.word}
                    <i className={item.tagType ? 'iconfont icon-huo' : ''}></i>
                </span>)}
            </div>
        </div>
        {visible2 ? <div className='search-list' >
            {searchArr.length !== 0 ? searchArr.map((item, index) => <div key={index}><Link to={'/alllist/' + item.keyword}>{item.keyword}</Link></div>) : ''}

        </div> : ''}

    </div></>
}
export default Search